<template>
    <div class="bh container-panel">
        <div class="tree-panel bv">
            <div class="tree-panel-container">
                <zb-tree
                    ref="zbTree"
                    node-key="build_sn"
                    :data="treeData"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :indent="0"
                    @node-click="onNodeClick"
                ></zb-tree>
            </div>
        </div>
        <div class="panel-el bv">
            <zb-header-search
                ref="searchHeader"
                :valueTransform="enquiryData.valueTransform"
                :rule="enquiryData.inputs"
                :btns="enquiryData.btns"
                :btnsData="permissionsData"
                :searchBtn="enquiryData.searchBtn"
                @search="onQueryClick"
            ></zb-header-search>
            <div class="b1">
                <vxe-grid
                    ref="xTable"
                    v-bind="gridConfig"
                    :data="tableList.data"
                    :columns="tableList.column"
                    :rowClassName="tableList.formatRowClass"
                >
                    <template v-slot:operation="{ row }">
                        <zb-btn-group
                            :btns="tableList.btns"
                            :data="{ row, permissionsData }"
                        ></zb-btn-group>
                    </template>
                </vxe-grid>
            </div>
            <div class="pagination-el bh bend">
                <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                    :current-page="tableList.pagination.curr"
                    :page-sizes="gridConfig.pageSizes"
                    :page-size="tableList.pagination.limit"
                    :total="tableList.pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                ></el-pagination>
            </div>
        </div>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinColumnGrid } from "@/mixin/ColumnGrid";
import { mixinAccess } from "@/mixin/Access";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
import { isEmpty } from "@/utils/index";
@Component({
    name: "HouseRoomHome",
    mixins: [mixinColumnGrid, mixinAccess, mixinDialogFormParent],
    components: {
        dialogForm
    }
})
export default class HouseRoomHome extends Vue {
    @Action("houseRoom/list") gridList: any;
    @Action("houseRoom/del") delItem: any;

    @Action("sharing/roomDictionary") getDictionary: any;
    @Getter("sharing/roomDictionary") dictionaryData: any;
    @Getter("sharing/orientations") orientationsData: any;
    @Getter("sharing/renovation") renovationData: any;
    @Getter("sharing/roomAreaType") areaTypeData: any;
    @Getter("sharing/roomStatus") statusData: any;
    @Getter("sharing/investment") investmentData: any;

    @Action("houseBuildings/tree") getTree: any;
    @Getter("houseBuildings/tree") treeData: any;

    get bigData() {
        return { tree: this.treeData, dictionary: this.dictionaryData };
    }
    @Watch("bigData", { immediate: true })
    updateBigData({ tree, dictionary }: any) {
        if (!isEmpty(tree) && !isEmpty(dictionary)) {
            const me = this as any;
            me.$nextTick(() => {
                // 默认选中第一项
                const item = tree[0];
                me.onNodeClick(item);
                me.$refs.zbTree.setCurrentKey(item.build_sn);
            });
        }
    }

    defaultProps: object = {
        children: "children",
        label: "build_name",
        id: "build_sn",
        value: "build_sn"
    };

    headerSelectList: any = [
        {
            dataName: "orientationsData",
            keyName: "room_orientations"
        },
        {
            dataName: "areaTypeData",
            keyName: "area_type"
        },
        {
            dataName: "statusData",
            keyName: "room_status"
        }
    ];

    // 查询头配置
    enquiryData: any = {
        searchBtn: {
            condition: ["query"]
        },
        btns: [
            {
                label: "新增",
                class: "btn-blue",
                condition: ["add"],
                handleClick: (this as any).onAddClick
            }
        ],
        inputs: [
            {
                type: "input",
                field: "area_no",
                title: "编号",
                props: {
                    maxlength: 4
                },
                validate: [
                    {
                        min: 3,
                        message: "请输入3-4位编号"
                    }
                ]
            },
            {
                type: "select",
                field: "room_orientations",
                title: "朝向"
            },
            { type: "select", field: "area_type", title: "类型" },
            { type: "select", field: "room_status", title: "状态" }
        ]
    };

    transformList: any = [
        {
            dataName: "orientationsData",
            keyName: "orientations"
        },
        {
            dataName: "renovationData",
            keyName: "renovation_type"
        },
        {
            dataName: "investmentData",
            keyName: "is_investment"
        }
    ];
    // 列表配置
    tableList: any = {
        column: [
            {
                title: "房号",
                field: "full_room_name",
                minWidth: 120
            },
            {
                title: "类型",
                field: "full_room_type",
                minWidth: 80
            },
            {
                title: "房间建筑面积",
                field: "area_size",
                minWidth: 125,
                formatter: function ({ cellValue }: any) {
                    return cellValue + "m²";
                }
            },
            {
                title: "是否可招商",
                field: "is_investment_label",
                minWidth: 110
            },
            {
                title: "状态",
                field: "room_status",
                minWidth: 110
            },
            {
                title: "朝向",
                field: "orientations_label",
                minWidth: 80
            },
            {
                title: "租赁报价",
                field: "rental_price_name",
                minWidth: 100
            },
            {
                title: "装修",
                field: "renovation_type_label",
                minWidth: 80
            },
            {
                title: "租约sn",
                field: "lease_sn",
                minWidth: 100
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: {
                    default: "operation"
                },
                headerAlign: "center",
                align: "left",
                width: 120
            }
        ],
        btns: [
            {
                label: "修改",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: this.onDelClick
            }
        ],
        // proxy配置，用于加载数据
        proxy: {
            autoLoad: false,
            // 请求数据方法
            requestFun: (this as any).gridList,
            disposeItem: (this as any).disposeItem
        }
    };

    onDelClick({ row }: any) {
        const me = this as any;
        me.delList(row.area_sn, "该房间");
    }

    created() {
        this.getTree();
        this.getDictionary();
    }
    selectItem: any = "";
    // 菜单被点击时
    onNodeClick(data: any) {
        const me = this as any;
        me.tableList.lodaByDefaultParams({ build_sn: data.build_sn });
        me.selectItem = data;
    }

    editBefore() {
        const me = this as any;
        me.setDialogValue("selectId", me.selectItem.build_sn);
    }

    beforecloseDialog() {
        const me = this as any;
        // 窗口关闭后重置选中id
        me.setDialogValue("selectId", -1);
    }
}
</script>